<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video src="../test.mp4" controls width="300" height="300" style="display: none;"></video>
    <buton>开始播放</buton>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      const btnb = document.querySelector("buton");
      const video = document.querySelector("video");
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext("2d");

      btnb.onclick = function () {
        video.play();
        render();
      };
      function render() {
        ctx.drawImage(video, 0, 0, 400, 400);
        requestAnimationFrame(render);
      }
    </script>
  </body>
</html>
